<template>
  <div class="app-container">
    <el-card>
      <PageSearch
        v-permission="`get:/order/list`"
        :search-fields="searchFields"
        :load-data="getList"
        :page-param="pageParam"
      />
    </el-card>

    <el-row style="padding: 20px 0">
      <el-table
        v-permission="`get:/order/list`"
        :data="orderList"
      >
        <el-table-column label="订单号" prop="orderNo" />
        <el-table-column label="商品" prop="names" />
        <el-table-column label="订单金额" prop="payPrice" />
        <el-table-column label="商品数量" prop="amount" />
        <el-table-column
          v-slot="scope"
          label="订单状态"
        >
          <template>
            {{
              scope.row.status===0?"待支付":
              scope.row.status===1?"待发货":
              scope.row.status===2?"待收货":
              scope.row.status===3?"待评价":
              scope.row.status===4?"已评价":
              scope.row.status===-1?"已取消":""
            }}
          </template>

        </el-table-column>

        <el-table-column
          v-slot="scope"
          label="操作"
        >
          <template>
            <el-button
              plain
              @click.native.prevent="toDetail(scope.row)"
            >
              查看详情
            </el-button>
          </template>

        </el-table-column>
      </el-table>
    </el-row>

  </div>
</template>

<script>
import PageSearch from '@/pp-components/PageSearch.vue'
import { getList } from '@/api/pp/order/order'
import permission from '@/directive/permission/index.js'
export default {
  components: { PageSearch },
  directives: { permission },
  data() {
    return {
      searchFields: [
        { name: 'orderNo', placeholder: '订单号' },
        { name: 'names', placeholder: '商品名称模糊匹配' },
        { name: 'status', type: 'select',
          options: [
            { 'label': '已取消', value: -1 },
            { 'label': '待支付', value: 0 },
            { 'label': '待发货', value: 1 },
            { 'label': '待收货', value: 2 },
            { 'label': '待评价', value: 3 },
            { 'label': '已评价', value: 4 }
          ],
          placeholder: '选择状态' }
      ],
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      orderList: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    handleSizeChange() {
      this.pageParam.pageSize = val
      this.pageParam.pageNum = 1
    },
    handleCurrentChange() {
      this.pageParam.pageSize = val
      this.pageParam.pageNum = 1
    },
    getList() {
      getList(this.pageParam).then(res => {
        this.orderList = res.data.list
        this.pageParam.total = res.data.total
      })
    },
    toDetail(row) {
      this.$router.push('/order/detail?id=' + row.orderId)
    }
  }
}
</script>

<style lang="sass" scoped>

</style>
